<template>
  <a-drawer
    title="项目配置"
    :width="720"
    :visible="visibleDrawer"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :form="form" layout="vertical" hide-required-mark>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="项目名称">
            <a-input
              v-decorator="['name']"
              placeholder="没有获取到任何信息"
              :read-only="true"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="应用名称">
            <a-input v-decorator="['app_name']" placeholder="该项不能为空" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="分辨率">
            <a-input
              v-decorator="[
                'resolving_power',
                {
                  rules: [{ required: true, message: '该项不能为空' }],
                },
              ]"
              placeholder="该项不能为空"
              :read-only="true"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-model-item
        v-for="domain in dynamicValidateForm.domains"
        :key="domain.id"
      >
        {{ domain.id }}
        <a-input
          v-model="domain.name"
          type="button"
          style="width: 60%; margin-right: 8px"
          @click="showChildrenDrawer(domain)"
        />
      </a-form-model-item>
    </a-form>
    <a-upload-dragger
      name="file"
      :multiple="true"
      :action="'/api/project/' + projectData.id"
      method="put"
      @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或者拖拽项目文件到该区域以更新项目</p>
      <p class="ant-upload-hint">只支持单个上传以及.dsft.ini结尾的文件</p>
    </a-upload-dragger>
    <a-drawer
      :title="domain.id + ' ' + domain.name"
      width="320"
      :closable="false"
      :visible="childrenDrawer"
      @close="onChildrenDrawerClose"
    >
      <a-form-model-item>
        <a-form-item
          :label="'顺序编号(共' + dynamicValidateForm.domains.length + ')'"
        >
          <a-input v-model="domain.id" style="width: 60%; margin-right: 8px" />
        </a-form-item>
        <a-form-item label="场景延迟(秒)">
          <a-input
            v-model="domain.delay_time"
            style="width: 60%; margin-right: 8px"
          />
        </a-form-item>
        <a-form-item label="超时时间(分钟)">
          <a-input
            v-model="domain.out_time"
            style="width: 60%; margin-right: 8px"
          />
        </a-form-item>
      </a-form-model-item>
    </a-drawer>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="reset"> 重置 </a-button>
      <a-button type="primary" @click="save"> 保存 </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: "ProjectPluginDrawer",
  props: ["projectData", "visibleDrawer", "onClose", "getProject"],
  data() {
    return {
      form: this.$form.createForm(this),
      domain: {},
      childrenDrawer: false,
      dynamicValidateForm: {
        domains: [],
      },
    };
  },
  methods: {
    showChildrenDrawer(domain) {
      this.domain = domain;
      this.childrenDrawer = true;
    },
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
    async reset() {
      // 根据id查询配置信息
      let res = await this.ProjectService.getProjectConfigById(
        this.$props.projectData.id
      );
      if (res.code !== "200") {
        this.$props.onClose();
        return this.$message.warn(res.msg);
      }
      let project = res.data[0];
      this.form.setFieldsValue({
        name: project.name,
        app_name: project.config.app_name,
        resolving_power: project.config.resolving_power,
      });
      this.dynamicValidateForm.domains = project.config.run_order;
    },
    async save() {
      let projectConfig = this.form.getFieldsValue();
      projectConfig.run_order = this.dynamicValidateForm.domains;
      let res = await this.ProjectService.putProjectConfigById(
        this.$props.projectData.id,
        projectConfig
      );
      if (res.code !== "200") {
        return this.$message.warn(res.msg);
      }
      this.$props.getProject();
      return this.$message.success("配置文件更新成功");
    },
    handleChange(info) {
      let _res = info.file.response;
      const status = info.file.status;
      if (status === "done") {
        if (_res.code === "200") {
          this.$message.success(`${info.file.name} 更新成功`);
          this.cacheId = _res.data;
        } else {
          this.$message.error(`${info.file.name} 上传失败，${_res.msg}`);
        }
      } else if (status === "error") {
        this.$message.error(`${info.file.name} 上传失败`);
      }
    },
  },
  watch: {
    async projectData() {
      await this.reset();
    },
  },
};
</script>

<style scoped></style>
